//1.样式的兼容

function getStyle(ele, attr){
    if(window.getComputedStyle){
        // google
        return window.getComputedStyle(ele, null)[attr];
    }
    // ie
    return ele.currentStyle[attr];
}


//obj DOM对象
// json  {"height":"200px","width":200}
function animate(obj, json){
    //1.清空定时器
    clearInterval(obj.timer);
    //2.开启定时器
    obj.timer = setInterval(function(){
        //8.定义清除定时器的开关
        //默认所有的动画都走完了
        var flag = true;

        //3. 现在是多个属性
        for(var key in json){
            //4.快定义当前位置 ,目标位置
            //目标位置
            var target = parseInt(json[key]);
            //当前位置
            var current = parseInt(getStyle(obj, key));
            //5.步长= (目标位置-当前位置)/10
            var step = (target - current) / 10;
            //6.向上取整还是向下取整?
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //7.新的位置=当前的位置+步长
            obj.style[key] = current + step + "px";

            //9. 询问是否真的每一个属性都走完了? 找没有走完的情况
            if(current != target){
                flag = false;
            }

        }

        //10. 最后去统一 问一问 是否真的走完了

        if(flag == true){
            clearInterval(obj.timer);
            //也就是动画真正的走完了时机!
        }

        console.log("end");
    })

}




